<template>
  <ExamMain @change="changeCategory">
    <div class="special-wrapper">
      <TreeSpecial
        :none="item"
        :data="item"
        v-for="item in specialList"
        :key="item.id"
      ></TreeSpecial>
      <div v-if="!loading && specialList.length == 0" class="special-no">
        <edu-no-data></edu-no-data>
      </div>
      <EduPagination @handleCurrentChange="handleCurrentChange"></EduPagination>
    </div>
  </ExamMain>
</template>

<script>
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
import TreeSpecial from './components/special-item'
import ExamMain from '../components/examMain'
export default {
  components: {
    EduNoData,
    EduPagination,
    TreeSpecial,
    ExamMain
  },
  data() {
    return {
      specialList: [],
      category: 0,
      moduleId: 0,
      loading: true
    }
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        this.$store.dispatch('paginate/setPaginate', {
          currentPage: 1
        })
        this.moduleId = n.query.id
        this.category = n.query.category
        this.getSpecialList()
      }
    }
  },
  created() {
    // this.getSpecialList()
  },
  methods: {
    getSpecialList() {
      // if (!this.moduleId || !this.category) return
      this.$api.getExamSpecialList(
        {
          module_id: this.moduleId,
          category: this.category,
          page: this.$store.getters['paginate/page'],
          count: 10
        },
        res => {
          this.handleGetDataSucc(res)
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.getSpecialList()
    },
    handleGetDataSucc(res) {
      const { data } = res
      this.specialList = data.data
      this.$store.dispatch('paginate/setPaginate', {
        listRows: 10,
        total: data.total
      })
      setTimeout(() => {
        this.loading = false
      }, 200)
    },
    changeCategory(data) {
      this.category = data.cid
      this.moduleId = data.mid
      this.getSpecialList()
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.special-wrapper {
  margin-top: 10px;
  .special-list {
    ::v-deep .el-tree {
      background-color: transparent;
      .el-tree-node {
        background-color: #ffffff;
        margin-top: 10px;
        padding-left: 30px;
        padding-right: 30px;
        .el-tree-node {
          margin-top: 0;
          padding-left: 0;
          padding-right: 0;
        }
      }
      .el-tree-node__content {
        height: auto;
        cursor: auto;
      }
      .el-tree-node__content:hover,
      .el-tree-node:focus > .el-tree-node__content {
        background-color: transparent;
      }
    }

    .special-tree-node {
      padding: 22px 0;
      flex: 1;
      display: flex;
      justify-content: space-between;
      .tree-left {
        width: 600px;
        .title {
          font-size: 16px;
          font-weight: 500;
          color: $text-color-import;
        }
        .progress {
          margin-top: 12px;
          display: flex;
          align-items: center;
          .el-progress {
            flex: 1;
          }
          .num {
            font-size: 13px;
            font-weight: 400;
            color: $text-color-auxiliary;
          }
        }
      }
      .tree-right {
        display: flex;
        align-items: center;
      }
    }
  }
  .special-no {
    padding: 50px 0;
    background-color: #ffffff;
  }
}
</style>
